<!--多条件搜索-->
<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <!--一行显示按钮和搜索-->
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.agencyNo+'  '+item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>

          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="name">开户状态</nz-form-label>
        <nz-form-control nzErrorTip="请选择开户状态">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择开户状态" formControlName="status">
            <nz-option nzLabel="审核中" nzValue="0"></nz-option>
            <nz-option nzLabel="开通" nzValue="1"></nz-option>
            <nz-option nzLabel="拒绝" nzValue="2"></nz-option>
            <nz-option nzLabel="风险" nzValue="3"></nz-option>
            <nz-option nzLabel="渠道人工审核中" nzValue="4"></nz-option>
            <nz-option nzLabel="平台审核中" nzValue="10"></nz-option>
            <nz-option nzLabel="禁用" nzValue="11"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="name">关键字</nz-form-label>
        <nz-form-control>
          <input type="text" id="keyword" nz-input formControlName="keyword" placeholder="外部订单号/商户号/资质号/手机号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div nz-col nzFlex="auto" class="search-area">
        <button nz-button nzType="primary" class="button_search"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
      </div>
    </div>
  </div>
</form>


<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable  [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th nzLeft>商户简称</th>
      <th>类型</th>
      <th>商户号</th>
      <th nzWidth="120px">开户状态</th>
      <th>当前使用渠道</th>
      <th>运营商</th>
      <th>商户法人</th>
      <th>资质号</th>
      <th>费率</th>
      <th>查看认证状态</th>
      <th>时间</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis nzLeft>{{data.merchantShortName}}</td>
        <td nzEllipsis>
          <span *ngIf="data.qualificationType == qualificationTypeEnum.MAIN">主资质</span>
          <span *ngIf="data.qualificationType == qualificationTypeEnum.COOPERATION">合作资质</span>
        </td>
        <td nzEllipsis>{{data.merchantId}}</td>
        <td nzEllipsis>
          <nz-tag [nzColor]="'#2db7f5'" *ngIf="data.status == 0">审核中</nz-tag>
          <nz-tag [nzColor]="'#87d068'" *ngIf="data.status == 1">开通</nz-tag>
          <nz-tag [nzColor]="'#f50'" *ngIf="data.status == 2 || data.status == 5" nz-tooltip [nzTooltipTitle]="data.failReason">拒绝</nz-tag>
          <nz-tag [nzColor]="'#ff0000'" *ngIf="data.status == 3">风险</nz-tag>
          <nz-tag [nzColor]="'#41bcf3'" *ngIf="data.status == 4">渠道人工审核中</nz-tag>
          <nz-tag [nzColor]="'#6fcefa'" *ngIf="data.status == 10">平台审核中</nz-tag>
          <nz-tag [nzColor]="'#ff2600'" *ngIf="data.status == 11">禁用</nz-tag>
        </td>
        <td nzEllipsis>
          <button [nzSize]="'small'" nz-button nzType="primary" (click) = "editShow(data)">{{data.payCompanyName}}</button>
        </td>
        <td nzEllipsis>
          <a (click)="skipMerchant(data)" *ngIf="data.userUserName">
            <div>{{data.username}}</div>
            <div class="text-sm text-grey">{{data.userUserName}}</div>
          </a>
          <span *ngIf="!data.userUserName"> <nz-tag nzColor="success">微信一键登录</nz-tag></span>
        </td>
        <td nzEllipsis>{{data.name}}</td>
        <td nzEllipsis>{{data.certNo}}</td>
        <td nzEllipsis>{{data.feeValue | emptyCheckPipe:2 | percent:'1.0-3'}}</td>
        <td nzEllipsis>
          <button (click)="showAuthenticationStatus(data)" nz-button nzType="primary" nzSize="small" [nzLoading]="nzLoading && feedback.id==data.id">查看</button>
        </td>
        <td nzEllipsis>{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
      </tr>

    </ng-container>
    </tbody>
  </nz-table>
</div>
<app-merchant-manage-edit [isVisible] = "isVisible" (emit)="setVisible($event)" [feedback] = "feedback"></app-merchant-manage-edit>

<app-authentication-status [isVisible] = "authenticationStatus" (emit)="setVisibleAuthenticationStatus($event)" [feedback]="feedback" [merchantList] = "merchantList"></app-authentication-status>
